let $data={
	a:[1],
	b:1
}

const root = document.getElementById('app')
const btn = document.getElementById('btn')
const btn2 = document.getElementById('btn2')

function render () {
	console.log('render')
    root.innerHTML = '++:'+$data.b+'   push:'+$data.a.toString()
}
const handler = {
    get: function(obj, prop) {
    	const res = Reflect.get(obj,prop)
    	return typeof res == 'object' ? myProxy(res) : res
    },
    set:function(obj, prop,value){
    	const res = Reflect.set(obj,prop,value)
    	render()
    	return res
    }
};

myProxy=(p={},h=handler)=>{
	return new Proxy(p, h);
}



$data = myProxy($data,handler)

btn.addEventListener('click',()=>{

   $data.b+=1  
  
},false)

btn2.addEventListener('click',()=>{

   $data.a.push($data.b) 
},false)

btn3.addEventListener('click',()=>{

   $data.a[$data.a.length-1]=666 
},false)
  
render()
   // $data.b+=1 
